<!DOCTYPE html>
<html>

{include file='public/header'}

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">用户管理</a>
            <a><cite>用户列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                 <div class="layui-inline">
                    <label class="layui-form-label w-auto">用户ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">公众号ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="official_account_id" placeholder="请输入公众号ID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">小程序ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="applet_id" placeholder="请输入小程序ID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">时间：</label>
                    <div class="layui-inline" id="time" style="display: flex;align-items: center;">
                        <div class="layui-input-inline" style="margin-right:10px">
                            <input type="text" autocomplete="off" name="start_date" id="start_date" class="layui-input"
                                placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" name="end_date" id="end_date" class="layui-input"
                                placeholder="结束日期">
                        </div>
                    </div>
                </div>
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>
        <table id="user" lay-filter="user"></table>
    </div>
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="look">详情</a>
        <a class="layui-btn layui-btn-xs" lay-event="give">赠送K币</a>
        <a class="layui-btn layui-btn-xs" lay-event="black">拉黑</a>
    </script>
    <script>
        let params = {
            elem: '#user'
            , toolbar: '#toolbarDemo'
            , url: '/admin/user/list' //数据接口
            , id: 'user'
            , page:true
            , limit:15
            , cols: [[ //表头
                { field: 'id', title: '用户ID', width: 105, align:'center',sort: true }
                // , {
                //     field: 'avatar', title: '头像',align:'center', width: 100, templet: function (d) {
                //         if (d.avatar) {
                //             return `<div class="layer-photos" style="cursor:pointer;height: 100%;">
                //                     <img onclick="showimg(this)" style="height: 100%;" src=`+ d.avatar + ` alt="">
                //                 </div>`;
                //         } else {
                //             return ``
                //         }
                //     }
                // }
                // , { field: 'user_name', title: '用户名',align:'center', width:100}
                , { field: 'mobile_system', title: '手机系统', align:'center', width:100 }
                // , { field: 'applet_id', title: '小程序ID',align:'center', width:86}
                , { field: 'applet_name', title: '小程序名称',align:'center', width:115}
                // , { field: 'official_account_id', title: '公众号ID',align:'center', width:86}
                , { field: 'official_account_name', title: '公众号名称',align:'center', width:120}
                , { field: 'money', title: '余额（K币）', align:'center', width:110}
                , { field: 'first_charge_date', title: '首充时间', width:160, align:'center',templet: function (d) {
                        return dayjsFormat(d.first_charge_date)
                    }
                }
                , {
                    field: 'is_members', title: '是否是会员', align:'center', width:100, templet: function (d) {
                        return d.is_members == 0 ? '否' : '是'
                    }
                }
                , { field: 'expiration_time', title: '会员过期时间',  width:160, align:'center', templet: function (d) {
                        return dayjsFormat(d.expiration_time)
                    }
                }
                , { field: 'created_at', title: '注册时间',  width:160, align:'center', templet: function (d) {
                        return dayjsFormat(d.created_at)
                    }
                }
                , { field: 'activation_time', title: '激活时间', width:160, align:'center', templet: function (d) {
                    return d.activation_time ? d.activation_time : ''
                    }
                }
                , { field: 'last_login_time', title: '最近一次登录时间',  width:160, align:'center', templet: function (d) {
                        return dayjsFormat(d.last_login_time)
                    }
                }
                , { field: 'link_id', title: '链接id', align:'center', width:80}
                // , {
                //     field: 'status', title: '关注状态', align:'center', width:90, templet: function (d) {
                //         return d.status == 0 ? '否' : '是'
                //     }
                // }
                // , { field: 'closing_time', title: '取关时间',align:'center', templet: function (d) {
                //     return dayjsFormat(d.closing_time)
                //     }
                // }
                , { toolbar: '#tbBar', title: '操作', width:200, align:'center'}
            ]]
        }
        tableList(params)

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期范围
            laydate.render({
                elem: '#time'
                , range: ['#start_date', '#end_date']
                ,format: 'yyyy-MM-dd'
            });
        })

        layui.use('table', function () {
            var table = layui.table;
            table.on('tool(user)', function (obj) {
                var event = obj.event;
                if (event === 'look') {
                    x_admin_show(`用户信息详情`, `./info.html?id=${obj.data.id}`, 1200, 600,null);
                }
                if (event === 'give') {
                    x_admin_show(`赠送K币`, `./give.html?id=${obj.data.id}`, 800, 700 );
                }
                if(event === 'black'){
                    x_admin_show(`拉黑用户`, `./black.html?id=${obj.data.id}`, 500, 400 );
                }
            });

        });
    </script>
</body>

</html>